<template>
  <div class="system-table-wrapper">
    <!-- 表格头部 - 完全匹配原型 -->
    <div class="table-header bg-bg-hover border-b border-border flex justify-between items-center p-4">
      <div class="table-title text-text-secondary font-medium">
        <slot name="title">{{ title }}</slot>
      </div>
      <div class="table-actions flex items-center space-x-2">
        <slot name="header-actions">
          <!-- 默认操作按钮 -->
          <template v-if="showActions">
            <button 
              class="header-action-btn" 
              title="筛选" 
              @click="emit('filter')"
              v-permission="filterPermission || undefined"
            >
              <i class="fas fa-filter"></i>
            </button>
            <button 
              class="header-action-btn" 
              title="导入" 
              @click="emit('import')"
              v-permission="importPermission || undefined"
            >
              <i class="fas fa-upload"></i>
            </button>
            <button 
              class="header-action-btn" 
              title="导出" 
              @click="emit('export')"
              v-permission="exportPermission || undefined"
            >
              <i class="fas fa-download"></i>
            </button>
          </template>
        </slot>
        
        <!-- 每页条数选择器 -->
        <div v-if="showActions" class="search-select-wrapper">
          <el-select 
            :model-value="pageSize"
            @update:model-value="changePageSize"
            placeholder="条/页"
            class="page-size-select"
          >
            <el-option 
              v-for="size in pageSizes" 
              :key="size" 
              :value="size"
              :label="`${size}条/页`"
            />
          </el-select>
        </div>
      </div>
    </div>
    
    <!-- 表格内容 -->
    <div class="system-table">
      <el-table
        v-bind="$attrs"
        :row-class-name="getRowClass"
        style="width: 100%"
      >
        <slot></slot>
      </el-table>
    </div>
    
    <!-- 分页器 - 完全匹配原型样式 -->
    <div v-if="total > 0" class="table-pagination p-4 border-t border-border flex flex-col md:flex-row md:justify-between md:items-center">
      <!-- 左侧统计信息 -->
      <div class="text-text-secondary text-sm mb-4 md:mb-0">
        共 <span class="text-primary font-medium">{{ total }}</span> 条数据，当前显示第 
        <span class="text-primary font-medium">{{ Math.min((currentPage - 1) * pageSize + 1, total) }}-{{ Math.min(currentPage * pageSize, total) }}</span> 条
      </div>
      
      <!-- 右侧页码按钮 - 匹配原型样式 -->
      <div class="flex items-center space-x-2">
        <button 
          class="pagination-btn"
          :class="{ disabled: currentPage <= 1 }"
          :disabled="currentPage <= 1"
          @click="changePage(currentPage - 1)"
        >
          <i class="fas fa-angle-left"></i>
        </button>
        
        <button
          v-for="page in visiblePages"
          :key="page"
          class="pagination-btn"
          :class="{ active: page === currentPage }"
          @click="changePage(page)"
        >
          {{ page }}
        </button>
        
        <button 
          class="pagination-btn"
          :class="{ disabled: currentPage >= totalPages }"
          :disabled="currentPage >= totalPages"
          @click="changePage(currentPage + 1)"
        >
          <i class="fas fa-angle-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElSelect, ElOption } from 'element-plus'

// 配置组件选项
defineOptions({
  inheritAttrs: false
})

// Props - 简化版本，大部分都有默认值
const props = defineProps({
  title: {
    type: String,
    default: '数据列表'
  },
  // 分页相关 - 只需要必要的
  total: {
    type: Number,
    default: 0
  },
  // 可选配置
  showActions: {
    type: Boolean,
    default: true  // 显示头部操作按钮
  },
  pageSizes: {
    type: Array as () => number[],
    default: () => [10, 20, 50, 100]
  },
  // 权限控制
  filterPermission: {
    type: String,
    default: ''
  },
  importPermission: {
    type: String,
    default: ''
  },
  exportPermission: {
    type: String,
    default: ''
  }
})

// Events - 简化版本
const emit = defineEmits<{
  // 只保留真正需要的事件
  'page-change': [page: number, pageSize: number] // 统一的分页变化事件
  filter: []
  import: []
  export: []
}>()

// 内部状态管理
const currentPage = ref(1)
const pageSize = ref(20) // 默认20条/页

// 表格行类名
const getRowClass = ({ rowIndex }: { rowIndex: number }) => {
  return 'table-row-animate'
}

// 分页相关计算属性
const totalPages = computed(() => Math.ceil(props.total / pageSize.value))

const visiblePages = computed(() => {
  const pages: number[] = []
  const maxVisible = 5
  
  let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2))
  let end = Math.min(totalPages.value, start + maxVisible - 1)
  
  if (end - start < maxVisible - 1) {
    start = Math.max(1, end - maxVisible + 1)
  }
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  
  return pages
})

// 分页方法
const changePage = (page: number) => {
  if (page >= 1 && page <= totalPages.value && page !== currentPage.value) {
    currentPage.value = page
    emit('page-change', page, pageSize.value)
  }
}

const changePageSize = (size: number | string) => {
  pageSize.value = Number(size)
  currentPage.value = 1 // 重置到第一页
  emit('page-change', 1, pageSize.value)
}

// 暴露给父组件的方法和状态
defineExpose({
  currentPage: currentPage.value,
  pageSize: pageSize.value,
  refresh: () => {
    emit('page-change', currentPage.value, pageSize.value)
  }
})
</script>

<style lang="scss" scoped>
.system-table-wrapper {
  background: var(--bg-panel);
  border-radius: var(--radius-lg);            // 恢复圆角
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

// 表格头部样式
.table-header {
  border-top-left-radius: var(--radius-lg);    // 恢复左上圆角
  border-top-right-radius: var(--radius-lg);   // 恢复右上圆角
  
  .table-title {
    font-size: 16px;
    font-weight: 500;
  }
  
  .table-actions {
    .header-action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: none;
      outline: none;
      background: transparent;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
      color: var(--text-muted);
      
      &:hover {
        color: var(--color-primary);
        background: var(--primary-weak);
      }
      
      i {
        font-size: 14px;
      }
    }
  }
  
  // 分页器下拉选择器样式调整
  .search-select-wrapper {
    min-width: 100px;  // 设置最小宽度
    
    .el-select {
      .el-select__wrapper {
        height: 32px !important;  // 表格头部用较小高度
        padding: 4px 8px !important;  // 较小的内边距
      }
      
      .el-select__selection {
        .el-select__placeholder,
        .el-select__selected-item {
          font-size: 12px !important;  // 较小字体
        }
      }
      
      .el-select__suffix {
        .el-select__caret {
          svg {
            width: 12px !important;
            height: 12px !important;
          }
        }
      }
    }
  }
}

// 分页器样式 - 完全匹配原型
.table-pagination {
  background: var(--bg-panel);
  
  .text-sm {
    font-size: 14px;
  }
  
  .mb-4 {
    margin-bottom: 1rem;
  }
  
  @media (min-width: 768px) {
    .md\:mb-0 {
      margin-bottom: 0;
    }
    
    .md\:flex-row {
      flex-direction: row;
    }
    
    .md\:justify-between {
      justify-content: space-between;
    }
    
    .md\:items-center {
      align-items: center;
    }
  }
}

// 分页按钮样式 - 匹配原型
.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;                                      // w-8 = 32px
  height: 32px;                                     // h-8 = 32px
  border: 1px solid var(--border);                 // border border-border
  border-radius: 4px;                              // rounded (小圆角)
  background: var(--bg-panel);                     // 白色背景
  color: var(--text-secondary);                    // text-text-secondary
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  
  &:hover:not(.disabled):not(.active) {
    background: var(--bg-hover);                   // hover:bg-bg-hover
  }
  
  &.active {
    background: var(--color-primary);              // bg-primary (黑色)
    color: white;                                   // text-white
    border-color: var(--color-primary);
  }
  
  &.disabled {
    opacity: 0.5;                                   // disabled:opacity-50
    cursor: not-allowed;                            // disabled:cursor-not-allowed
    
    &:hover {
      background: var(--bg-panel);
    }
  }
  
  i {
    font-size: 12px;
  }
}
</style>
